<template>
	<view class="queAns">
		<view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view :class="['pageTitle','dFlex','jBetween_aCenter']">
				<view class="backIcon imgPublic" @tap='tool.back()'>
					<image src="../static/images/back.png" mode="widthFix"></image>
				</view>
				<view class="title"></view>
				<view class="backIcon imgPublic"></view>
			</view>
		</view>
		<view class="advImg imgPublic">
			<image src="https://wx.gdxixiashi.com/public/images/person/banner@2x.png" mode="widthFix"></image>
		</view>
		<view class="container">
			<view class="search dFlex jBetween_aCenter">
				<view class="ipt">
					<input type="text" v-model="keyword" @input='searchKW' placeholder="请输入您的问题">
				</view>
				<view class="searchIcon imgPublic">
					<image src="https://wx.gdxixiashi.com/public/images/person/sousuo@2x.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="menus dFlex jAround_aCenter">
				
				<view class="menuOne"  v-for='(item,index) in stylelist' :key='index' @tap='lookKind(item)'>
					<view class="menuImg imgPublic">
						<image :src="domain +item.index_image" mode="widthFix"></image>
					</view>
					<text>{{item.style_name}}</text>
				</view>
				
			</view>
			<view class="recommend">
				<view class="tit">{{style_name}}</view>
				<view class="list" v-if="list.length">
					<view class="arc dFlex jBetween_aCenter" v-for="(item,index) in list" :key='index' @tap="lookDetail(item.id)">
						<view class="arc_desc">
							<view class="arcTit">{{item.title}}</view>
							<view class="desc" v-html='item.content'></view>
						</view>
						<view class="arcImg imgPublic" >
							<image :src="domain + item.image_path" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="list empty imgPublic" v-else>
					<image src="../static/images/empty.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				stylelist:[],
				list:[],
				page:1,
				domain:getApp().globalData.imgDomain,
				styleId:'',
				style_name:'',
				load:false,
			};
		},
		onLoad() {
			this.initData();
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page++;
				this.initList();
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			initData(){
				this.tool.getData('Regist/problemIndex',{}).then(res=>{
					// console.log(res);
					if(res){
						this.stylelist = res.stylelist;
						this.styleId=res.stylelist[0].styleId
						this.style_name=res.stylelist[0].style_name
						this.list = res.list;
						
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			initList(){
				this.tool.getData('Regist/problemList',{
					styleId:this.styleId,
					page:this.page,
					keyword:this.keyword,
				}).then(res=>{
					// console.log(res);
					if(res){
						this.list = this.page == 1?res.list:this.list.concat(res.list);
						this.load = res.list.length>=10?true:false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 查看详情
			lookDetail(id){
				uni.navigateTo({
					url:'./actDetail?id='+id
				})
			},
			// 关键字搜索
			searchKW(e){
				this.page = 1;
				if(e.detail.value){
					this.keyword = e.detail.value;
					this.initList();
				}else{
					this.initData();
				}
			},
			// 查看分类
			lookKind(item){
				this.page = 1;
				this.styleId = item.styleId;
				this.style_name=item.style_name
				this.initList();
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: white;
	}
	.queAns{
		width: 100%;
		.container{
			width: 100%;
			border-radius: 20px 20px 0 0;
			padding: 15px 4%;
			box-sizing: border-box;
			position: relative;
			top: -40px;
			background: white;
			.recommend{
				width: 100%;
				.list{
					width: 100%;
					.arc{
						width: 100%;
						padding: 12px 0;
						border-bottom: 1px solid #EEEEEE;
						.arcImg{
							width: 100px;
							height: 100px;
							overflow: hidden;
							margin-left: 12px;
						}
						.arc_desc{
							flex: 1;
							.desc{
								width: 100%;
								line-height: 22px;
								font-size: 12px;
								color: #6F6565;
								word-break: break-all;
								overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 3;
								-webkit-box-orient: vertical;
								
							}
							.arcTit{
								width: 100%;
								font-size: 16px;
								margin-bottom: 6px;
								font-weight: bold;
							}
						}
					}
					.arc:last-child{
						border: none;
					}
				}
				.tit{
					width: max-content;
					padding: 0 0 0 6px;
					border-left: 3px solid #1664FF;
					font-weight: bold;
					font-size: 16px;
				}
			}
			.menus{
				width: 100%;
				margin: 14px 0 20px;
				.menuOne{
					width: 25%;
					text-align: center;
					font-size: 12px;
					.menuImg{
						width: 33px;
						height: 45px;
						margin:0 auto 6px;
					}
				}
			}
			.search{
				width: 100%;
				background: #F8F8F8;
				border-radius: 16px;
				padding: 8px 12px;
				box-sizing: border-box;
				.ipt{
					flex: 1;
				}
				.searchIcon{
					width: 16px;
					margin-left: 12px;
				}
			}
		}
	}
</style>
